/* eslint-disable @typescript-eslint/no-var-requires */
// const webpack = require('webpack');
const path = require('path')
const CopyPlugin = require('copy-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
// const ExtensionReloader = require('webpack-extension-reloader')
const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin')

const srcDir = path.join(__dirname, '../src/')
const pagesDir = path.join(srcDir, '/pages')

module.exports = {
  cache: {
    type: 'filesystem',
  },
  entry: {
    background: path.join(pagesDir, 'background.ts'),
    content_script: path.join(pagesDir, 'content_script.ts'),
    popup: path.join(pagesDir, 'popup.ts'),
    main: path.join(pagesDir, 'main.ts'),
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.vue', '.json'],
    alias: {
      // vue: 'vue/dist/vue.runtime.esm-bundler.js',
      '@': srcDir,
      //   _assets: path.join(__dirname, './assets'),
      //   _demoStyles: path.join(__dirname, './demo-styles')
    }
  },
  output: {
    path: path.join(__dirname, '../dist/js'),
    filename: '[name].js',
    // chunkFilename: 'CS.[name].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.js/,
        enforce: 'pre',
        include: /node_modules[\\/]monaco-editor[\\/]esm/,
        use: MonacoWebpackPlugin.loader
      },
      // {
      //   test: /\.(t|j)s$/,
      //   exclude: /node_modules/,
      //   use: [
      //     {
      //       loader: 'ts-loader',
      //       options: {
      //         appendTsSuffixTo: [/.vue$/],
      //       }
      //     }
      //   ]
      // },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
      // {
      //   test: /\.less$/,
      //   use: [
      //     "style-loader",
      //     "css-loader",
      //     "less-loader",
      //   ],
      // },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new MonacoWebpackPlugin({
      // features: ['coreCommands', 'suggest', 'format'],
      Language: 'javascript'

    }),
    new CopyPlugin({
      patterns: [
        { from: '.', to: '../', context: 'public' },
      ],
    }),
    // new ExtensionReloader({
    //   port: 9090, // Which port use to create the server
    //   reloadPage: true, // Force the reload of the page also
    //   entries: { // The entries used for the content/background scripts or extension pages
    //     contentScript: 'content_script',
    //     background: 'background',
    //     extensionPage: 'popup',
    //   }
    // }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        // dayjs: {
        //   minSize: 300, // 因为默认值是30000 这个包达不到所以要单独指定
        //   name: 'dayjs',
        //   priority: 20,
        //   test: /[\\/]node_modules[\\/]dayjs[\\/]/,
        // },
        // codemirror: {
        //   minSize: 300, // 因为默认值是30000 这个包达不到所以要单独指定
        //   name: 'codemirror',
        //   priority: 20,
        //   test: /[\\/]node_modules[\\/]codemirror[\\/]/,
        // },
        // vue: {
        //   chunks: 'all',
        //   minChunks: 1,
        //   // reuseExistingChunk: true,
        //   minSize: 1,
        //   name: 'vue',
        //   priority: 20,
        //   reuseExistingChunk: true,
        //   enforceSizeThreshold: 1,
        //   test(module) {
        //     return module.resource && module.resource.includes('vue.runtime.esm-bundler.js')
        //   },
        // },
        vendors: {
          name: 'chunks',
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    }
  }
};
